<script setup>
/**
 * 目的：绘制雷达图（脱离地图框架）
 */
import { onMounted } from 'vue';
import Request from '../request';
//雷达图
import RadarSail from './radar/radarSail';

onMounted(() => {
  // 雷达
  addRader();
});

let radarSail;

const addRader = () => {
  Request.getJson('./data/city/radarData.json', (dataRadar) => {
    const valueRadar = [0, 20, 40, 60, 80, 100];
    var canvas = document.getElementById('webgl');
    radarSail = new RadarSail(canvas, 0.55);
    radarSail.doLoadData(dataRadar, valueRadar);
  });
};

const clearRader = () => {
  radarSail.clearRader();
};
</script>


<template>
  <div id="WebGL">
    <canvas id="webgl"
            width="800"
            height="800">
      Please use a browser that supports "canvas"
    </canvas>
    <button @click="clearRader">清除</button>
  </div>
</template>


<style lang="scss">
#WebGL {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>